<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用HTML块级标签(块元素)</title>
</head>
<body>
<!--常用的有语义的块级元素 有默认样式 独占一行-->
    <!--标题标签 h1-h6-->
        <!--这是一个标题-->
        <!--这是另一个标题-->
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
    <!--段落标签 独占一行 有默认样式-->
        <!--br 标签强制换行标签-->
        <p>超文本标记语言<br>（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 </p>
        <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 </p>

    <!--列表-->
        <!--无序列表 ul li  有默认样式 独占一行-->
        <!--注意 ul标签当中  只能写li标签-->
        <ul>
            <!--<h1></h1> -->
            <li>列表项一</li>
            <li>列表项二</li>
            <li>列表项三</li>
        </ul>
    <!--有序列表 ol li 有自己得默认样式 独占一行-->
        <!--有序列表当中有type属性 设置有列表的标记类型
        start 设置列表项从第几个标记开始
        -->
        <ol type="i" start="5">
            <li>这是有序列表</li>
            <li>这是有序列表</li>
        </ol>
    <!--自定义列表 dl dt dd-->
        <dl>
            <dt>这是自定义列表</dt>
            <dd>这是自定义列表</dd>
            <dd>这是自定义列表</dd>
            <dt>这是自定义列表的标题</dt>
            <dd>这是列表标题的解释</dd>
        </dl>
    <!--表格标签 table声明一个表格 th表头 tr行 td列-->
        <!--声明一个表格-->
        <!--
            table 的属性 : width   设置单元格的总体宽度
                            height  设置单元格的总体高度
                            border 设置边框是否显示
                            cellpadding 设置表格当中内容距离边框间距
                            cellspacing 设置表格和表格之间的间距
             单元格合并 :colspan  设置水平方向一个单元格占据的宽度
                         rowspan  设置垂直方一个单元格占据的高度
             单元格内容的对齐方式: align 水平对齐方式 默认是靠左显示   center  right
                                    valign 处置对齐方式 默认垂直居中   top    bottom
                                    注意:如果给tr设置  会影响整行 给td设置只影响当前的单元格
              th 标签代表表头  默认水平居中  并且有加粗效果

        -->
        <table border="1" cellpadding="10px" cellspacing="0" width="800px" height="700px">
            <!--表格当中行  第一行-->
            <tr >
                <!--这是表格当中的列-->
                <!--<td colspan="4">这是第一行的第一列</td>-->
                <th colspan="4">这是表头</th>
                <!--<td>这是第一行的第二列</td>-->
                <!--<td>这是di一行的第三列</td>-->
                <!--<td>这是第一行的第四列</td>-->
            </tr>
            <!--这是第二行-->
            <tr valign="top" align="center">
                <td rowspan="2">这是第二行的第一列</td>
                <td>这是第二行的第二列</td>
                <td>这是第二行的第三列</td>
                <td>这是第三行的第四列</td>
            </tr>
            <!--第三行-->
             <tr>
                <!--<td>这是第三行的第一列</td>-->
                <td>这是第三行的第二列</td>
                <td>这是第三行的第三列</td>
                <td>这是第三行的第四列</td>
            </tr>
        </table>
<!--水平分割线-->
    <hr>

    <!--区块元素 没有默认样式(没有默认的语义) div  独占一行 一般用来划定一块区域 配合css在布局当中使用 -->
    <div>这是一个div</div>
<br>
<br>
<br>
</body>
</html>